<template>
  <div class="teaching-design-list-container">
    <div class="page-header">
      <div class="header-left">
        <h1>教学设计</h1>
      </div>
      <div class="header-right">
        <el-button type="primary" @click="router.push('/task/create')">
          <el-icon><Plus /></el-icon>创建备课
        </el-button>
      </div>
    </div>

    <div class="filter-container">
      <el-form :inline="true" :model="filterForm" class="filter-form">
        <el-form-item label="学科">
          <el-select v-model="filterForm.subject" placeholder="全部学科" clearable>
            <el-option label="语文" value="chinese"></el-option>
            <el-option label="数学" value="math"></el-option>
            <el-option label="英语" value="english"></el-option>
            <el-option label="物理" value="physics"></el-option>
            <el-option label="化学" value="chemistry"></el-option>
            <el-option label="生物" value="biology"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="年级">
          <el-select v-model="filterForm.grade" placeholder="全部年级" clearable>
            <el-option label="七年级" value="7"></el-option>
            <el-option label="八年级" value="8"></el-option>
            <el-option label="九年级" value="9"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="状态">
          <el-select v-model="filterForm.status" placeholder="全部状态" clearable>
            <el-option label="草稿" value="draft"></el-option>
            <el-option label="已发布" value="published"></el-option>
            <el-option label="已归档" value="archived"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-input
            v-model="filterForm.keyword"
            placeholder="搜索课程名称"
            clearable
            @keyup.enter="handleSearch"
          >
            <template #prefix>
              <el-icon><Search /></el-icon>
            </template>
          </el-input>
        </el-form-item>
      </el-form>
    </div>

    <div class="design-list">
      <el-row :gutter="20">
        <el-col :span="8" v-for="design in designList" :key="design.id">
          <el-card class="design-card" shadow="hover">
            <div class="card-header">
              <h3 class="design-title">{{ design.title }}</h3>
              <el-tag :type="getStatusType(design.status)" size="small">
                {{ getStatusText(design.status) }}
              </el-tag>
            </div>
            <div class="design-meta">
              <span>{{ design.subject }}</span>
              <span>{{ design.grade }}年级</span>
              <span>更新于 {{ formatDate(design.updatedAt) }}</span>
            </div>
            <p class="design-desc">{{ design.description }}</p>
            <div class="card-footer">
              <el-button-group>
                <el-button type="primary" link @click="editDesign(design.id)">
                  <el-icon><Edit /></el-icon>编辑
                </el-button>
                <el-button type="primary" link @click="previewDesign(design.id)">
                  <el-icon><View /></el-icon>预览
                </el-button>
                <el-dropdown>
                  <el-button type="primary" link>
                    <el-icon><More /></el-icon>更多
                  </el-button>
                  <template #dropdown>
                    <el-dropdown-menu>
                      <el-dropdown-item @click="shareDesign(design.id)">
                        <el-icon><Share /></el-icon>分享
                      </el-dropdown-item>
                      <el-dropdown-item @click="duplicateDesign(design.id)">
                        <el-icon><CopyDocument /></el-icon>复制
                      </el-dropdown-item>
                      <el-dropdown-item divided @click="deleteDesign(design.id)">
                        <el-icon><Delete /></el-icon>删除
                      </el-dropdown-item>
                    </el-dropdown-menu>
                  </template>
                </el-dropdown>
              </el-button-group>
            </div>
          </el-card>
        </el-col>
      </el-row>

      <div v-if="!designList.length" class="empty-state">
        <el-empty description="暂无教学设计">
          <el-button type="primary" @click="router.push('/task/create')">创建备课</el-button>
        </el-empty>
      </div>

      <div class="pagination-container" v-if="designList.length">
        <el-pagination
          v-model:current-page="currentPage"
          v-model:page-size="pageSize"
          :total="total"
          :page-sizes="[12, 24, 36, 48]"
          layout="total, sizes, prev, pager, next, jumper"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        />
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { useRouter } from 'vue-router'
import { ElMessage, ElMessageBox } from 'element-plus'
import {
  Plus,
  Edit,
  View,
  More,
  Share,
  CopyDocument,
  Delete,
  Search,
} from '@element-plus/icons-vue'

const router = useRouter()

// 筛选表单
const filterForm = ref({
  subject: '',
  grade: '',
  status: '',
  keyword: '',
})

// 分页相关
const currentPage = ref(1)
const pageSize = ref(12)
const total = ref(100)

// 模拟数据
const designList = ref([
  {
    id: '1',
    title: '初中数学函数概念导入课',
    subject: '数学',
    grade: '七',
    status: 'published',
    description: '通过实际生活中的例子，引导学生理解函数的概念，掌握函数的基本性质。',
    updatedAt: '2024-03-10',
  },
  {
    id: '2',
    title: '牛顿第一定律教学设计',
    subject: '物理',
    grade: '八',
    status: 'draft',
    description: '结合生活实例，帮助学生理解惯性定律，培养学生的科学思维能力。',
    updatedAt: '2024-03-09',
  },
  {
    id: '3',
    title: '诗词鉴赏课程设计',
    subject: '语文',
    grade: '九',
    status: 'archived',
    description: '以古诗词为载体，培养学生的文学素养和审美能力。',
    updatedAt: '2024-03-08',
  },
])

// 获取状态类型
const getStatusType = (status: string): string => {
  const statusMap: Record<string, string> = {
    draft: 'info',
    published: 'success',
    archived: 'warning',
  }
  return statusMap[status] || 'info'
}

// 获取状态文本
const getStatusText = (status: string): string => {
  const statusMap: Record<string, string> = {
    draft: '草稿',
    published: '已发布',
    archived: '已归档',
  }
  return statusMap[status] || '未知状态'
}

// 格式化日期
const formatDate = (date: string): string => {
  return new Date(date).toLocaleDateString('zh-CN')
}

// 搜索
const handleSearch = () => {
  currentPage.value = 1
  // 这里添加搜索逻辑
}

// 编辑设计
const editDesign = (id: string) => {
  router.push(`/teaching-design/${id}`)
}

// 预览设计
const previewDesign = (id: string) => {
  router.push(`/teaching-design/${id}/preview`)
}

// 分享设计
const shareDesign = (id: string) => {
  ElMessage.info('分享功能开发中')
}

// 复制设计
const duplicateDesign = (id: string) => {
  ElMessage.success('复制成功')
}

// 删除设计
const deleteDesign = (id: string) => {
  ElMessageBox.confirm('确定要删除这个教学设计吗？', '删除确认', {
    confirmButtonText: '确认',
    cancelButtonText: '取消',
    type: 'warning',
  })
    .then(() => {
      designList.value = designList.value.filter((item) => item.id !== id)
      ElMessage.success('删除成功')
    })
    .catch(() => {})
}

// 处理分页
const handleSizeChange = (val: number) => {
  pageSize.value = val
  // 这里添加分页逻辑
}

const handleCurrentChange = (val: number) => {
  currentPage.value = val
  // 这里添加分页逻辑
}
</script>

<style scoped>
.teaching-design-list-container {
  padding: 20px;
  background-color: #fff;
  border-radius: 8px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
}

.page-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}

.page-header h1 {
  margin: 0;
  font-size: 24px;
  color: #303133;
}

.filter-container {
  margin-bottom: 20px;
  padding: 20px;
  background-color: #f5f7fa;
  border-radius: 4px;
}

.design-card {
  margin-bottom: 20px;
  transition: all 0.3s;
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 10px;
}

.design-title {
  margin: 0;
  font-size: 16px;
  color: #303133;
}

.design-meta {
  display: flex;
  gap: 16px;
  color: #909399;
  font-size: 14px;
  margin-bottom: 10px;
}

.design-desc {
  margin: 10px 0;
  color: #606266;
  font-size: 14px;
  line-height: 1.5;
  height: 42px;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.card-footer {
  display: flex;
  justify-content: flex-end;
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid #ebeef5;
}

.empty-state {
  padding: 40px 0;
  text-align: center;
}

.pagination-container {
  margin-top: 20px;
  display: flex;
  justify-content: center;
}
</style>
